<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>成远生产管控平台 - 后台管理系统</title>
    <!-- Layui -->
    <link rel="stylesheet" href="./layui/css/layui.css"/>
    <script src="./layui/layui.js"></script>
    <link rel="stylesheet" href="css/admin.css">
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Moment.js -->
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- SheetJS (XLSX) -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <!-- FileSaver.js -->
    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
    <script>
        // 全局配置
        window.appConfig = {
            // apiBaseUrl: 'http://localhost:8080' // 开发环境
            apiBaseUrl: 'http://59.110.144.74:8080' // 生产环境
        };
    </script>

</head>

<body>

<!-- 顶部导航栏 -->
<div class="header-container">
    <div class="header-left">
        <div class="header-logo">
            <i class="fa fa-cogs"></i>
            <h3 class="header-title">成远生产管控平台</h3>
        </div>
        <div class="header-info">
            <p style="margin: 0;">欢迎您，<span id="usernameDisplay"></span>！</p>
            <p style="margin: 0;">当前时间：<span id="currentTime"></span></p>
        </div>
    </div>
    <div class="header-right">
        <div class="user-info">
            <div class="user-avatar"><i class="fa fa-user"></i></div>
            <span id="usernameDisplayMobile"></span>
        </div>
        <button class="layui-btn logout-btn" id="logoutBtn">
            <i class="fa fa-sign-out"></i> 退出系统
        </button>
    </div>
</div>

<div class="layui-layout layui-layout-admin">
    <!-- 左侧导航栏 -->
    <div class="layui-side">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="adminNav">
                <li class="layui-nav-item layui-this" data-tab="query">
                    <a href="javascript:;">
                        <i class="fa fa-search"></i>
                        <span>数据查询</span>
                    </a>
                </li>
                <li class="layui-nav-item" data-tab="user">
                    <a href="javascript:;">
                        <i class="fa fa-users"></i>
                        <span>用户权限管理</span>
                    </a>
                </li>
                <li class="layui-nav-item" data-tab="material">
                    <a href="javascript:;">
                        <i class="fa fa-cube"></i>
                        <span>材料管理</span>
                    </a>
                </li>
                <li class="layui-nav-item" data-tab="truckSize">
                    <a href="javascript:;">
                        <i class="fa fa-truck"></i>
                        <span>车辆类型管理</span>
                    </a>
                </li>
                <li class="layui-nav-item" data-tab="truckUnit">
                    <a href="javascript:;">
                        <i class="fa fa-car"></i>
                        <span>单车辆信息管理</span>
                    </a>
                </li>
                <li class="layui-nav-item" data-tab="unit">
                    <a href="javascript:;">
                        <i class="fa fa-building"></i>
                        <span>单位信息管理</span>
                    </a>
                </li>
                <li class="layui-nav-item" data-tab="gate">
                    <a href="javascript:;">
                        <i class="fa fa-unlock-alt"></i>
                        <span>门岗管理</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="layui-body">
        <div class="layui-tab" lay-filter="adminTabs" lay-allowclose="false">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="query">数据查询</li>
                <li lay-id="user">用户管理</li>
                <li lay-id="material">材料管理</li>
                <li lay-id="truckSize">车辆类型管理</li>
                <li lay-id="truckUnit">单车辆信息管理</li>
                <li lay-id="unit">单位管理</li>
                <li lay-id="gate">门岗管理</li>
            </ul>

            <div class="layui-tab-content">
                <!-- 数据查询 -->
                <div class="layui-tab-item layui-show">
                    <div class="content-container">
                        <div class="section-title">
                            <i class="fa fa-search"></i>
                            数据查询
                        </div>


                        <form class="layui-form query-form" lay-filter="queryForm">
                            <div class="query-form-item">
                                <label class="query-form-label">门岗</label>
                                <div class="layui-input-inline query-form-input">
                                    <select name="gateName" id="gateName" lay-verify="gateName">
                                        <option value="">请选择</option>
                                        <option value="门牌1">门牌1</option>
                                        <option value="门牌2">门牌2</option>
                                    </select>
                                </div>
                                <div class="layui-form-mid query-form-checkbox">
                                    <input type="checkbox" name="useGateName" id="useGateName" title="使用门岗查询"
                                           data-target="gateName" checked>
                                </div>
                            </div>

                            <div class="query-form-item">
                                <label class="query-form-label">车牌号</label>
                                <div class="layui-input-inline query-form-input">
                                    <input type="text" name="plate" id="plate" placeholder="车牌号" class="layui-input">
                                </div>
                                <div class="layui-form-mid query-form-checkbox">
                                    <input type="checkbox" name="usePlate" id="usePlate" title="使用车牌号查询"
                                           data-target="plate" checked>
                                </div>
                            </div>

                            <div class="query-form-item">
                                <label class="query-form-label">施工单位</label>
                                <div class="layui-input-inline query-form-input">
                                    <select name="unitName" id="unitName">
                                        <option value="">请选择</option>
                                        <option value="施工单位A">施工单位A</option>
                                        <option value="施工单位B">施工单位B</option>
                                        <option value="施工单位C">施工单位C</option>
                                    </select>
                                </div>
                                <div class="layui-form-mid query-form-checkbox">
                                    <input type="checkbox" name="useUnitName" id="useUnitName"
                                           title="使用施工单位查询" data-target="unitName" checked>
                                </div>
                            </div>

                            <div class="query-form-item">
                                <label class="query-form-label">开始时间</label>
                                <div class="layui-input-inline query-form-input">
                                    <input type="text" name="startTime" id="startTime" placeholder="开始时间"
                                           class="layui-input">
                                </div>
                                <div class="layui-form-mid query-form-checkbox">
                                    <input type="checkbox" name="useStartTime" id="useStartTime"
                                           title="使用开始时间查询" data-target="startTime" checked>
                                </div>
                            </div>

                            <div class="query-form-item">
                                <label class="query-form-label">结束时间</label>
                                <div class="layui-input-inline query-form-input">
                                    <input type="text" name="endTime" id="endTime" placeholder="结束时间"
                                           class="layui-input">
                                </div>
                                <div class="layui-form-mid query-form-checkbox">
                                    <input type="checkbox" name="useEndTime" id="useEndTime" title="使用结束时间查询"
                                           data-target="endTime" checked>
                                </div>
                            </div>

                            <div class="query-form-item query-form-actions">
                                <button class="layui-btn" lay-submit lay-filter="queryForm">
                                    <i class="fa fa-search"></i> 查询
                                </button>
                                <button class="layui-btn layui-btn-normal" id="exportBtn">
                                    <i class="fa fa-download"></i> 导出Excel
                                </button>
                            </div>
                        </form>
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-primary" id="addDataBtn">
                                <i class="fa fa-plus"></i> 新增数据
                            </button>
                        </div>
                        <table id="dataTable" lay-filter="dataTable"></table>


                        <div class="statistics-container">
                            <div class="statistics-item">
                                <i class="fa fa-balance-scale"></i>
                                <span>总重量:</span>
                                <span class="statistics-value" id="totalWeight">0.00</span>
                                <span>吨</span>
                            </div>
                            <div class="statistics-item">
                                <i class="fa fa-cubes"></i>
                                <span>总体积:</span>
                                <span class="statistics-value" id="totalVolume">0.00</span>
                                <span>立方米</span>
                            </div>
                            <div class="statistics-item">
                                <i class="fa fa-truckRecord"></i>
                                <span>总记录:</span>
                                <span class="statistics-value" id="totalCount">0</span>
                                <span>条</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 用户管理 -->
                <div class="layui-tab-item">
                    <div class="content-container">
                        <div class="section-title">
                            <i class="fa fa-users"></i>
                            用户管理
                        </div>
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-primary" id="addUserBtn">
                                <i class="fa fa-plus"></i> 添加用户
                            </button>
                        </div>
                        <table id="userTable" lay-filter="userTable"></table>
                    </div>
                </div>
                <!-- 材料管理 -->
                <div class="layui-tab-item ">
                    <div class="content-container">
                        <div class="section-title">
                            <i class="fa fa-cube"></i> 材料管理
                        </div>
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-primary" id="addMaterialBtn">
                                <i class="fa fa-plus"></i> 添加材料
                            </button>
                        </div>
                        <table id="materialTable" lay-filter="materialTable"></table>
                    </div>
                </div>
                <!-- 车辆尺寸管理 -->
                <div class="layui-tab-item">
                    <div class="content-container">
                        <div class="section-title">
                            <i class="fa fa-truck"></i> 车辆类型管理
                        </div>
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-primary" id="addTruckSizeBtn">
                                <i class="fa fa-plus"></i> 添加车型
                            </button>
                        </div>
                        <table id="truckSizeTable" lay-filter="truckSizeTable"></table>
                    </div>
                </div>

                <!-- 车辆信息管理 -->
                <div class="layui-tab-item">
                    <div class="content-container">
                        <div class="section-title">
                            <i class="fa fa-car"></i> 车辆信息管理
                        </div>
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-primary" id="addTruckUnitBtn">
                                <i class="fa fa-plus"></i> 添加车辆
                            </button>
                        </div>
                        <table id="truckUnitTable" lay-filter="truckUnitTable"></table>
                    </div>
                </div>

                <!-- 单位管理 -->
                <div class="layui-tab-item">
                    <div class="content-container">
                        <div class="section-title">
                            <i class="fa fa-building"></i> 单位管理
                        </div>
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-primary" id="addUnitBtn">
                                <i class="fa fa-plus"></i> 添加单位
                            </button>
                        </div>
                        <table id="unitTable" lay-filter="unitTable"></table>
                    </div>
                </div>
                <!-- 门岗管理 -->
                <div class="layui-tab-item">
                    <div class="content-container">
                        <div class="section-title">
                            <i class="fa fa-door-open"></i> 门岗管理
                        </div>
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-primary" id="addGateBtn">
                                <i class="fa fa-plus"></i> 添加门岗
                            </button>
                        </div>
                        <table id="gateTable" lay-filter="gateTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加用户弹窗模板 -->
<script type="text/html" id="addUserTpl">
    <form class="layui-form" lay-filter="addUserForm" style="padding: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required|username" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" lay-verify="required|password" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select name="isAdmin" lay-verify="required">
                    <option value="true">管理员</option>
                    <option value="false">普通用户</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属单位</label>
            <div class="layui-input-block">
                <select name="unitId" lay-verify="required" lay-search>
                    {{# layui.each(d.units, function(index, item) { }}
                    <option value="{{ item.id }}">{{ item.unitName }}</option>
                    {{# }); }}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit>提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<!-- 编辑用户弹窗模板 -->
<script type="text/html" id="editUserTpl">
    <form class="layui-form" lay-filter="editUserForm" style="padding: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" value="{{ d.username }}" readonly class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" placeholder="留空不修改" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select name="isAdmin" lay-verify="required">
                    <option value="true" {{ d.isAdmin  ? 'selected' : '' }}>管理员</option>
                    <option value="false" {{ !d.isAdmin  ? 'selected' : '' }}>普通用户</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属单位</label>
            <div class="layui-input-block">
                <select name="unitId" lay-verify="required" lay-search>
                    {{# layui.each(d.units, function(index, item) { }}
                    <option value="{{ item.id }}" {{ item.id == d.unitId ? 'selected' : '' }}>{{ item.unitName }}</option>
                    {{# }); }}
                </select>
            </div>
        </div>
        <input type="hidden" name="id" value="{{ d.id }}">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit>提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<!-- 数据编辑弹窗模板 -->
<script type="text/html" id="dataEditTpl">
    <form class="layui-form" lay-filter="dataEditForm" style="padding:20px">
        <!-- 门岗选择 -->
        <div class="layui-form-item">
            <label class="layui-form-label">门岗</label>
            <div class="layui-input-block">
                <select name="gate" lay-verify="required" lay-search>
                    <option value="">请选择门岗</option>
                    {{# layui.each(d.gates, function(index, item){ }}
                    <option value="{{ item.id }}" {{# if(item.id == d.gateId){ }}selected{{# } }}>{{ item.name }}</option>
                    {{# }); }}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">施工单位</label>
            <div class="layui-input-block">
                <input type="text" name="unitName" value="{{ d.unitName }}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车牌号</label>
            <div class="layui-input-block">
                <input type="text" name="plate" value="{{ d.plate }}" class="layui-input" lay-verify="plate">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">时间</label>
            <div class="layui-input-block">
                <input type="text" name="time" value="{{ d.time }}" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">材料</label>
            <div class="layui-input-block">
                <input type="text" name="material" value="{{ d.material }}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密度</label>
            <div class="layui-input-block">
                <input type="number" name="density" value="{{ d.density }}" step="0.01" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">体积(m³)</label>
            <div class="layui-input-block">
                <input type="number" name="volume" value="{{ d.volume }}" step="0.01" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">重量(吨)</label>
            <div class="layui-input-block">
                <input type="number" name="weight" value="{{ d.weight }}" step="0.01" class="layui-input">
            </div>
        </div>
        <input type="hidden" name="id" value="{{ d.id }}">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit>
                    <i class="fa fa-save"></i> 保存
                </button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="resetForm()">
                    <i class="fa fa-refresh"></i> 重置
                </button>
            </div>
        </div>
    </form>
</script>
<!-- 用户操作模板 -->
<script type="text/html" id="userActionTpl">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-xs table-action-btn" lay-event="edit">
            <i class="fa fa-edit"></i> 编辑
        </button>
        <button class="layui-btn layui-btn-xs layui-btn-danger table-action-btn" lay-event="delete">
            <i class="fa fa-trash"></i> 删除
        </button>
    </div>
</script>
<!-- 材料弹窗模板 -->
<script type="text/html" id="addMaterialTpl">
    <form class="layui-form" lay-filter="addMaterialForm" style="padding: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">材料类型</label>
            <div class="layui-input-block">
                <input type="text" name="materialType" lay-verify="required|materialType" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密度</label>
            <div class="layui-input-block">
                <input type="number" name="density" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit>提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<!-- 车辆尺寸弹窗模板 -->
<script type="text/html" id="addTruckSizeTpl">
    <form class="layui-form" lay-filter="addTruckSizeForm" style="padding: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">车辆类型</label>
            <div class="layui-input-block">
                <input type="text" name="truckType" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">高度</label>
            <div class="layui-input-block">
                <input type="number" name="height" step="0.01" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">宽度</label>
            <div class="layui-input-block">
                <input type="number" name="width" step="0.01" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">长度</label>
            <div class="layui-input-block">
                <input type="number" name="length" step="0.01" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit>提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<!-- 车辆信息弹窗模板 -->
<script type="text/html" id="addTruckUnitTpl">
    <form class="layui-form" lay-filter="addTruckUnitForm" style="padding: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">车牌号</label>
            <div class="layui-input-block">
                <input type="text" name="plate" lay-verify="required|plate" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车辆类型</label>
            <div class="layui-input-block">
                <input type="text" name="truckType" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属单位</label>
            <div class="layui-input-block">
                <select name="unitName" lay-verify="required" lay-search>
                    {{# layui.each(d.units, function(index, item){ }}
                    <option value="{{item.unitName}}">{{item.unitName}}</option>
                    {{# }); }}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit>提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<!-- 单位管理弹窗模板 -->
<script type="text/html" id="addUnitTpl">
    <form class="layui-form" lay-filter="addUnitForm" style="padding: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">单位名称</label>
            <div class="layui-input-block">
                <input type="text" name="unitName" lay-verify="required|unitName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit>提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<!-- 操作按钮模板 -->
<script type="text/html" id="infoActionTpl">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-xs table-action-btn" lay-event="edit">
            <i class="fa fa-edit"></i> 编辑
        </button>
        <button class="layui-btn layui-btn-xs layui-btn-danger table-action-btn" lay-event="delete">
            <i class="fa fa-trash"></i> 删除
        </button>
    </div>
</script>
<!-- 门岗弹窗模板 -->
<script type="text/html" id="addGateTpl">
    <form class="layui-form" lay-filter="addGateForm" style="padding: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">门岗名称</label>
            <div class="layui-input-block">
                <input type="text" name="gateName" lay-verify="required|gateName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <input type="hidden" name="id" value="{{ d.id }}">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit>提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<script src="js/admin.js"></script>
</body>
</html>